<template>
    <div class="lineMap">
    	<div class="t">
	        <div class="container">
		        <p class="lineTitle">TA-<span>APP</span>线路</p>
		        <div class="mapBox">
	            <div class="mapLine1 mapLine">
	                <div class="mapCube cube1">
	                    <p class="title">短视频</p>
	                    <p>用户可以发布各种关于区块链的短视频，打造区块链专属的“抖音”。</p>
	                </div>
	                <div class="mapCube cube2">
	                    <p class="bigTitle">2018年8月</p>
	                    <p class="centerText">TA-APP1.0发布</p>
	                </div>
	                <div class="mapCube cube3">
	                    <img src="~static/img/line/icon_shangsheng.png" alt="" class="mapIcon">
	                </div>
	                <div class="mapCube cube4">
	                    <p class="bigTitle">2018年8月-9月</p>
	                    <p class="centerText">TA-APP3.0发布</p>
	                </div>
	                <div class="mapCube cube5">
	                    <p class="title">Token公益</p>
	                    <p>完成线上和线下的公益活动</p>
	                    <p class="title">虚拟银行</p>
	                    <p>用户可以在虚拟银行中完成虚拟理财及借贷</p>
	                </div>
	            </div>
	            <div class="mapLine2 mapLine">
	                <div class="mapCube cube1">
	                    <img src="~static/img/line/icon_shuju.png" alt="" class="mapIcon">
	                </div>
	                <div class="mapCube cube2">
	                    <img src="~static/img/line/icon_liantiao.png" alt="" class="mapIcon">
	                </div>
	                <div class="mapCube cube3">
	                    <img src="~static/img/line/icon_shuju2.png" alt="" class="">
	                </div>
	                <div class="mapCube cube4">
	                    <img src="~static/img/line/icon_quzhongxin.png" alt="" class="mapIcon">
	                </div>
	            </div>
	            <div class="mapLine3 mapLine">
	                <div class="mapCube cube1">
	                    <p class="title">IM&nbsp;&nbsp;&nbsp;&nbsp;钱包&nbsp;&nbsp;&nbsp;&nbsp;TA圈</p>
	                    <p class="title">P2P流转交易    招聘</p>
	                    <p>首发1.0版本主要包含IM、钱包、TA圈、P2P流转交易、招聘等板块</p>
	                </div>
	                <div class="mapCube cube2">
	                    <p class="bigTitle">2018年8月-9月</p>
	                    <p class="centerText">TA-APP3.0发布</p>
	                </div>
	                <div class="mapCube cube3">
	                    <img src="~static/img/line/icon_jiaoyisuo.png" alt="">
	                </div>
	                <div class="mapCube cube4">
	                    <p class="bigTitle">2018年8月-12月</p>
	                    <p class="centerText">TA-APP4.0发布</p>
	                </div>
	                <div class="mapCube cube5">
	                    <p class="title">国际支付</p>
	                    <p>通过和国籍主流支付机构展开深入合作，合法合规完成即时跨境支付</p>
	                </div>
	            </div>
	        </div>
	        </div>
        </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
	.lineMap{width:100%;background:#261452 url("~static/img/line/bg.png") center bottom/100% no-repeat;display: table;padding: 100px 0;}
	.lineMap .t{display: table-cell;vertical-align: middle;}
    .lineMap .container .lineTitle{text-align: center;color:white;font-size: 29px;margin:35px 0;}
    .lineTitle span{border-bottom: 3px solid #6d55d1;padding:15px 0;}
    .lineMap .container .mapBox{width:100%;height:748px;background: url("~static/img/line/duobianxing.png") center no-repeat;}
    .mapBox .mapLine{width:100%;height:33.33%;}
    .mapBox .mapLine .mapCube{height:100%;width:20%;float: left;}
    .mapBox .mapLine .mapCube p{color: #fff;font-size: 13px;line-height:25px;}
    .mapBox .mapLine .mapCube .title{text-align: center;font-size: 15px;}
    .mapBox .mapLine .mapCube .bigTitle{text-align: center;font-size: 23px;margin-bottom:15px;}
    .mapBox .mapLine .mapCube .centerText{text-align: center;}
    .mapBox .mapLine .mapCube .mapIcon{height:52px;width:62px;float: left;}
    .mapLine1 .cube1{padding:110px 26px 0 26px;}
    .mapLine1 .cube2{padding:130px 20px 0 0;}
    .mapLine1 .cube3{padding:135px 0 0 83px;}
    .mapLine1 .cube4{padding:130px 0 0 20px;}
    .mapLine1 .cube5{padding:70px 33px 0 33px;}
    .mapLine2 .cube1{margin-left:9.5%;padding:97px 0 0 75px;}
    .mapLine2 .cube2{padding:97px 0 0 85px;}
    .mapLine2 .cube3{padding:97px 0 0 95px;}
    .mapLine2 .cube3 img{width:74px;height:53px;}
    .mapLine2 .cube4{padding:97px 0 0 105px;}
    .mapLine3 .cube1{padding:10px 35px 0 35px;}
    .mapLine3 .cube1 p:first-child{margin-bottom:0;}
    .mapLine3 .cube2,.cube4{padding:50px 35px 0 35px;}
    .mapLine3 .cube3{padding:45px 0 0 79px;}
    .mapLine3 .cube3 img{width:77px;height:66px;}
    .mapLine3 .cube4{padding:50px 0 0 23px;}
    .mapLine3 .cube5{padding:10px 0 0 44px;}
</style>
